import {Affix, Breadcrumb, Card, Col, Divider, Image, Input, Row, Timeline} from 'antd';
import {useEffect, useState} from "react";
import {BookOutlined, ClockCircleOutlined, CommentOutlined, ShareAltOutlined, UserOutlined} from "@ant-design/icons";
import {list} from "./service";
import Ad from "@/pages/news/components/Ad";
import CardTab from "@/pages/news/components/CardTab";

export default () => {
  const [dataSource, setDataSource] = useState<Record<string, any>[]>([]);
  useEffect(() => {
    list({

    }).then(result=>{
      setDataSource(result.data);
    })
  }, []);
  return (
    <>
      <Row>
        <Col span={2} />
        <Col span={16}>
          <Breadcrumb
            separator=">"
            items={[
              {
                title: '首页',
              },
              {
                title: <a href="">AI快讯</a>,
              },
              {
                title: <a href="">每日AI快讯新闻</a>,
              },
            ]}
          />
          <Card style={{marginTop: 24}} variant='borderless'>
            <h3 style={{fontSize: 28}}>每日AI快讯热闻</h3>
            <div style={{display: 'flex', justifyContent: 'space-between',alignItems: 'center'}}>
              <div>
                <span style={{marginRight:8}}><a style={{color:'#6c757d'}} href="https://ai-bot.cn/ai-news/"><BookOutlined /> AI快讯</a></span>
                <span style={{marginRight:8,color:'#6c757d'}} title="2023年8月11日 00:10发布"><ClockCircleOutlined /> 23小时前更新</span>
                <span style={{marginRight:8}}><a style={{color:'#6c757d'}} href="https://ai-bot.cn/author/1/" title="AI小集"><UserOutlined /> AI小集</a></span>
              </div>
              <div>
                <span style={{marginRight:8}}><a style={{color:'#6c757d'}} href="#comments"><CommentOutlined /> 54</a></span>
                <span style={{marginRight:8}}><a style={{color:'#6c757d'}} href="javascript:;"><span className="like-count"><ShareAltOutlined /> 1021</span></a></span>
              </div>
            </div>
            <div style={{height:8}} />
            <Divider />
            <div style={{height:8}} />
            <Image preview={false} src='https://ai-bot.cn/wp-content/uploads/2024/07/daily-ai-news-image02.png' />
            <div style={{height:16}} />
            <p style={{color:'#1d232b',fontSize:16}}>
              AI工具集每日实时更新 AI 行业的最新资讯、新闻、热点、融资、产品动态、爆料等，让你随时了解人工智能领域最新趋势、更新突破和热门大事件。加入AI工具集官方社群，获取最新一手信息！
            </p>
            <Affix offsetTop={10}>
              <Input placeholder='输入关键词搜索定位(精确匹配)' style={{width:'70%',height:40,color:'#6d6e74',border:'1px solid #f1f3f6',backgroundColor:'#f1f3f6'}} />
            </Affix>
            <div style={{height:32}} />
            <Timeline
              items={dataSource.map(item=>{
                if (item.type==='date'){
                  return  {
                    dot: <div style={{height: 16, width: 16, backgroundColor: '#5961f9'}}/>,
                    children: <h3 style={{color:'#5961f9',fontWeight:700,fontSize:20}}>{item.date}</h3>,
                  }
                }
                return {
                  children: (
                    <div>
                      <h2><a style={{color:'#282a2d',fontSize:18}} href={item.url} target="_blank" rel="noopener nofollow">{item.title}</a></h2>
                      <p style={{color:'#6c757d',fontSize:14}} dangerouslySetInnerHTML={{__html:item.memo}}>
                      </p>
                      <span style={{color:'#6c757d',display:'block'}}>来源：{item.source}</span>
                    </div>
                  ),
                };
              })}
            />
          </Card>
        </Col>
        <Col span={6}>
          <div style={{height:40}} />
          <Ad type='url' url='https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7941312752144276&output=html&h=250&slotname=4660461353&adk=908470438&adf=3724147500&pi=t.ma~as.4660461353&w=310&abgtt=6&fwrn=4&fwrnh=100&lmt=1754712712&rafmt=1&format=310x250&url=https%3A%2F%2Fai-bot.cn%2Fdaily-ai-news%2F&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJXaW5kb3dzIiwiMTkuMC4wIiwieDg2IiwiIiwiMTM5LjAuMzQwNS44NiIsbnVsbCwwLG51bGwsIjY0IixbWyJOb3Q7QT1CcmFuZCIsIjk5LjAuMC4wIl0sWyJNaWNyb3NvZnQgRWRnZSIsIjEzOS4wLjM0MDUuODYiXSxbIkNocm9taXVtIiwiMTM5LjAuNzI1OC42NyJdXSwwXQ..&dt=1754712712711&bpp=22&bdt=435&idt=22&shv=r20250805&mjsv=m202508050101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D48ecad0f06cf6f6e%3AT%3D1754370184%3ART%3D1754711281%3AS%3DALNI_MbZ4gkf44ZMoZYgvqx7gGCiqX4obA&gpic=UID%3D00001100aad25d64%3AT%3D1754370184%3ART%3D1754711281%3AS%3DALNI_MbQ_7Dboj0XOdCGiUwRYvyOYLtRhw&eo_id_str=ID%3D73e8aaca309ae459%3AT%3D1754370184%3ART%3D1754711281%3AS%3DAA-AfjZ_kO8cvUXtToZ5F-wLmLiK&prev_fmts=0x0&nras=1&correlator=5992132065112&frm=20&pv=1&u_tz=480&u_his=1&u_h=1067&u_w=1707&u_ah=1019&u_aw=1707&u_cd=24&u_sd=1.5&dmc=8&adx=1202&ady=140&biw=1695&bih=941&scr_x=0&scr_y=0&eid=31093040%2C95362655%2C95368228%2C95344789%2C95359266&oid=2&pvsid=6688755762123586&tmod=1016085533&uas=0&nvt=1&ref=https%3A%2F%2Fai-bot.cn%2Ffavorites%2Fai-writing-tools%2F&fc=1920&brdim=0%2C0%2C0%2C0%2C1707%2C0%2C1707%2C1019%2C1699%2C941&vis=1&rsz=%7C%7CleE%7C&abl=CS&pfx=0&fu=128&bc=31&bz=1&td=1&tdf=2&psd=W251bGwsbnVsbCxudWxsLDFd&nt=1&ifi=4&uci=a!4&fsb=1&dtd=25' />
          <Ad width={315} type='image' url='https://itab.link/?ref=aibot' image='https://ai-bot.cn/wp-content/uploads/2024/07/itab-detail-ad3.png.png' />
          <Ad width={315} type='image' url='https://www.trae.cn/?utm_source=advertising&utm_medium=aibot_ug_cpa&utm_term=hw_trae_aibot' image='https://ai-bot.cn/wp-content/uploads/2025/07/trae-ai-banner-0730.png' />
          <CardTab title='热门工具' type='app' />
          <CardTab title='最新收录' type='app' />
          <CardTab title='最新文章' type='news' />
        </Col>
      </Row>
    </>
  )
}
